<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="back-icon" @tap="goBack">
				<uni-icons type="left" size="20" color="#fff"></uni-icons>
			</view>
			<view class="title">维修记录</view>
			<view class="right-icons">
				<uni-icons type="more-filled" size="20" color="#fff"></uni-icons>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content-box">
			<!-- 状态切换 -->
			<view class="status-tabs">
				<view class="tab" :class="{ active: currentStatus === 0 }" @tap="switchStatus(0)">进行中</view>
				<view class="tab" :class="{ active: currentStatus === 1 }" @tap="switchStatus(1)">已完成</view>
			</view>

			<!-- 筛选区域 -->
			<view class="white-box filter-box">
				<view class="filter-item">
					<text>维修方式:</text>
					<uni-data-select v-model="value" :localdata="range" @change="change" :clear="false"
						style="width: 180rpx;"></uni-data-select>
				</view>
				<view class="date-picker">
					<!-- <uni-icons type="calendar" size="16"></uni-icons> -->
					<text>预约日期:</text>
					<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
				</view>
			</view>

			<!-- 订单列表 -->
			<view class="order-list">
				<view class="white-box order-item" v-for="(item, index) in orderList" :key="index"
					@click="toDetail(item)">
					<view class="info-row">
						<text class="label">维修单号:</text>
						<text class="value">{{ item.orderNo }}</text>
					</view>
					<view class="info-row">
						<text class="label">维修方式:</text>
						<text class="value">{{ item.type }}</text>
					</view>
					<view class="info-row">
						<text class="label">预约日期:</text>
						<text class="value">{{ item.date }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		padding: var(--status-bar-height) 16px 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title {
			color: #fff;
			font-size: 17px;
			font-weight: 500;
		}
	}

	.status-tabs {
		background: #fff;
		margin: 0 12px;
		border-radius: 12px 12px 0 0;
		display: flex;

		.tab {
			flex: 1;
			text-align: center;
			padding: 16px 0;
			position: relative;

			&.active {
				color: #4080FF;

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 20px;
					height: 2px;
					background: #4080FF;
				}
			}
		}
	}

	.filter-box {
		// display: flex;
		// justify-content: space-between;
		align-items: center;

		.date-picker {
			display: flex;
			align-items: center;
			gap: 8px;
			margin-top: 5px;
		}

		.filter-item {
			display: flex;
			align-items: center;
			gap: 8px;

			.selector {
				color: #4080FF;
				display: flex;
				align-items: center;
			}
		}
	}

	.order-list {
		.order-item {
			margin-bottom: 12px;

			.info-row {
				display: flex;
				margin-bottom: 12px;

				&:last-child {
					margin-bottom: 0;
				}

				.label {
					width: 80px;
					color: #666;
				}

				.value {
					color: #333;
				}
			}
		}
	}
</style>

<script>
	export default {
		data() {
			return {
				value: "全部", //下拉框
				//下拉框
				range: [{
						value: "全部",
						text: "全部"
					},
					{
						value: "到店维修",
						text: "到店维修"
					},
					{
						value: "上门取车",
						text: "上门取车"
					},
				], //下拉框
				//状态切换
				currentStatus: 0,
				//数据源列表
				orderList: [{
						orderNo: '3535252',
						type: '到店维修',
						date: '2022/11/10 11:00'
					},
					{
						orderNo: '3535252',
						type: '上门取车',
						date: '2022/11/10 11:00'
					},
					{
						orderNo: '3535252',
						type: '到店维修',
						date: '2022/11/10 11:00'
					}
				],
				//时间范围v-model
				datetimerange: []
			}
		},
		methods: {
			toDetail(item) {
				uni.navigateTo({
					url: "/pages/lz-MyWeiXiu/myrepair/repairdetail",
					data: item
				})
			},
			goBack() {
				uni.navigateBack()
			},
			//切换状态
			switchStatus(status) {
				this.currentStatus = status
			},
			//下拉框
			change(e) {
				console.log("e:", e);
			},
		}
	}
</script>